import React,{useState,useEffect} from 'react'
import {Popup } from 'react-vant'
import { connect } from 'react-redux';
import './index.scss'
import { changeMusicSrcAsync,changeMusicCurrentDetail } from '../../../store/actions/music'
function PopupSongList(props) {
  const {musicSrc,musicList,musicNode} = props
  function playSong(item){
    if(item.id===musicSrc.id)return props.closePopupSongList()
    console.log(musicNode,'musicNode');
    props.changeMusicSrcAsync(item.id)
    props.changeMusicCurrentDetail(item)
    props.closePopupSongList()
    let timer = setInterval(() => {
      musicNode.oncanplay=()=>{
        musicNode.play()
        clearInterval(timer)
      }
    }, 10);
  }
  return (
    <Popup
    visible={props.songListVisible}
    style={{ height: '80%','--rv-popup-background-color':'rgba(11, 15, 12, 0.92)'}}
    position='bottom'
    round
    onClose={()=>props.closePopupSongList()}
  >
   {props.musicList.map((item,index)=>{
      return(
        <div key={index} className='popup_song_list' onClick={()=>playSong(item)}
          style={{color:musicSrc.id===item.id?'#31c27c':'#FFF',padding:index===musicList.length-1?'0 20px 50px':'0 20px',
          backgroundColor:musicSrc.id===item.id?'aquamarine':''}}>
          {item.name}
          <span style={{color:musicSrc.id===item.id?'#31c27c':'#999'}}>-</span>
          {(item.ar || []).map((itm,idx)=>{
            return <span key={idx} style={{color:musicSrc.id===item.id?'#31c27c':'#999'}}>{itm.name}</span>
          })}
          <span className={['iconfont', musicSrc.id===item.id?'icon-paixingbang':'icon-24gl-play'].join(' ')}></span>
        </div>
      )
    })}
   <div className='popup_song_list_close' onClick={()=>props.closePopupSongList()}>关闭</div> 
  </Popup>
  )
}
export default connect(
  state =>({
    musicList:state.musicList,
    musicCurrentDetail:state.musicCurrentDetail,
    musicSrc:state.musicSrc,
    musicNode:state.musicNode
  }),{
    changeMusicSrcAsync,
    changeMusicCurrentDetail
  })(PopupSongList)
